// 以--w-xxx 命名变量
// 正色系 直接以颜色命名 如 --w-red --w-blue --w-green
// 背景色系 以 --w-bg-xxx 命名 如 --w-bg-white --w-bg-black
// 字体色系 以 --w-text-xxx 命名 如 --w-text-white --w-text-black
// 边框色系 以 --w-border-xxx 命名 如 --w-border-white --w-border-black
// 阴影色系 以 --w-shadow-xxx 命名 如 --w-shadow-white --w-shadow-black

// 若有透明度 则以 --w-xxx-xx 命名 如 --w-red-50 --w-red-80
@import '../../font/font.less';
// 默认浅色主题
:root {
  --w-white: #fff;
  --w-white-04: rgba(255, 255, 255, 0.04);
  --w-white-07: rgba(255, 255, 255, 0.07);
  --w-white-13: rgba(255, 255, 255, 0.13);
  --w-white-20: rgba(255, 255, 255, 0.2);
  --w-white-26: rgba(255, 255, 255, 0.26);
  --w-white-39: rgba(255, 255, 255, 0.39);
  --w-white-40: rgba(255, 255, 255, 0.4);
  --w-white-56: rgba(255, 255, 255, 0.56);
  --w-white-60: rgba(255, 255, 255, 0.6);
  --w-white-70: rgba(255, 255, 255, 0.7);
  --w-white-80: rgba(255, 255, 255, 0.8);
  --w-white-90: rgba(255, 255, 255, 0.9);
  --w-white-93: rgba(255, 255, 255, 0.93);
  --w-white-50: rgba(255, 255, 255, 0.5);

  --w-black: #333;
  --w-black-04: rgba(0, 0, 0, 0.04);
  --w-black-07: rgba(0, 0, 0, 0.07);
  --w-black-10: rgba(0, 0, 0, 0.1);
  --w-black-13: rgba(0, 0, 0, 0.13);
  --w-black-20: rgba(0, 0, 0, 0.2);
  --w-black-26: rgba(0, 0, 0, 0.26);
  --w-black-39: rgba(0, 0, 0, 0.39);
  --w-black-40: rgba(0, 0, 0, 0.4);
  --w-black-50: rgba(0, 0, 0, 0.5);
  --w-black-60: rgba(0, 0, 0, 0.6);
  --w-black-70: rgba(0, 0, 0, 0.7);
  --w-black-80: rgba(0, 0, 0, 0.8);
  --w-black-93: rgba(0, 0, 0, 0.93);
  --w-blue-30: rgba(34, 131, 226, 0.3);
  --w-primary-bg-f5f5f5: #f5f5f5;

  --w-prompt-bg-08: rgba(245, 224, 255, 0.08);

  --w-blue: #2283e2;
  --w-content-bg: var(--w-white-56);
  --w-ddd: #ddd;

  --w-E0E9EE: #e0e9ee;
  // 轻污重污shadow
  --w-shadow: rgba(0, 82, 172, 0.19);
  --w-white-cell: #fff;
  // --w-custom-font-regular: HIDC-Regular;
  // --w-custom-font-medium: HIDC-Medium;
  // --w-custom-font-bold: HIDC-Bold;
  --w-header-bg: #fff;
  --w-advance-bg: #efeeec;
  --w-van-switch-node-close: #ffffff;
  --w-van-switch-node-open: #ffffff;
  --w-van-switch-on: #2283e2;
  --van-popup-round-border-radius: 12px !important;
  --w-forecast: #bbbbbb;
  --van-duration-base: 0.5s;
  --van-collapse-item-duration: 0.2s;
}

// 深色主题
[data-theme='dark']:root {
  --w-white: #000000;
  --w-white-04: rgba(0, 0, 0, 0.04);
  --w-white-07: rgba(0, 0, 0, 0.07);
  --w-white-13: rgba(0, 0, 0, 0.13);
  --w-white-20: rgba(0, 0, 0, 0.2);
  --w-white-26: rgba(0, 0, 0, 0.26);
  --w-white-39: rgba(0, 0, 0, 0.39);
  --w-white-40: rgba(0, 0, 0, 0.4);
  --w-white-60: rgba(0, 0, 0, 0.6);
  --w-white-70: rgba(0, 0, 0, 0.7);
  --w-white-80: rgba(0, 0, 0, 0.8);
  --w-white-90: rgba(0, 0, 0, 0.9);
  --w-white-93: rgba(0, 0, 0, 0.93);
  --w-white-50: rgba(183, 209, 255, 0.2);

  --w-black: #fff;
  --w-black-04: rgba(255, 255, 255, 0.04);
  --w-black-07: rgba(255, 255, 255, 0.07);
  --w-black-10: rgba(255, 255, 255, 0.1);
  --w-black-13: rgba(255, 255, 255, 0.13);
  --w-black-20: rgba(255, 255, 255, 0.2);
  --w-black-26: rgba(255, 255, 255, 0.26);
  --w-black-39: rgba(255, 255, 255, 0.39);
  --w-black-40: rgba(255, 255, 255, 0.4);
  --w-black-60: rgba(255, 255, 255, 0.6);
  --w-black-70: rgba(255, 255, 255, 0.7);
  --w-black-80: rgba(255, 255, 255, 0.8);
  --w-black-93: rgba(255, 255, 255, 0.93);
  --w-blue-30: rgba(233, 189, 133, 0.3);
  --w-primary-bg-f5f5f5: #101026;

  --w-prompt-bg-08: rgba(245, 224, 255, 0.08);
  --w-blue: #c6aa83;
  --w-content-bg: rgba(245, 223, 255, 0.07);
  --w-ddd: rgba(245, 223, 255, 0.2);
  --w-white-cell: rgba(245, 223, 255, 0.07);
  --w-header-bg: #000000;
  --w-advance-bg: #4b4955;
  // vant cell 点击效果 vant3变量
  --van-cell-active-color: rgba(245, 223, 255, 0.07) !important;

  --van-picker-background-color: #343544;
  --van-picker-option-text-color: rgba(255, 255, 255, 0.93);
  --van-picker-mask-color:
    linear-gradient(180deg, rgba(52, 53, 68, 0.9), rgba(52, 53, 68, 0.4)),
    linear-gradient(0deg, rgba(52, 53, 68, 0.9), rgba(52, 53, 68, 0.4));
  --van-border-color: rgba(255, 255, 255, 0.13);
  --van-cell-background-color: rgba(183, 209, 255, 0.03);
  --van-field-placeholder-text-color: rgba(255, 255, 255, 0.26);
  --van-field-input-text-color: rgba(255, 255, 255, 0.8);

  // vant cell 点击效果 vant4变量
  --van-cell-background: rgba(245, 223, 255, 0.07);
  --van-collapse-item-content-background: rgba(0, 0, 0, 0); // 透明色
  --van-cell-text-color: rgba(255, 255, 255, 0.8);
  --w-custom-font-regular: HIDC-Regular;
  --w-custom-font-medium: HIDC-Medium;
  --w-custom-font-bold: HIDC-Bold;
  --van-search-content-background: rgba(183, 209, 255, 0.03);
  --w-van-switch-node-close: rgba(255, 255, 255, 0.3);
  --w-van-switch-node-open: #c6aa83;
  --w-van-switch-on: rgba(179, 143, 96, 0.39);
  --van-popup-round-border-radius: 12px !important;
  --w-forecast: #60627c;
}
// 卡萨帝主题
.w-theme-casarte {
  --w-red: red;
}
.WH (@w, @h) {
  width: @w;
  height: @h;
}
// 传入一个值的时候，默认宽高相同，传进的值是宽高
.WH (@w) {
  width: @w;
  height: @w;
}

// 背景
// 传进一个值的时候，就是传背景图 默认背景的background-size是100%，
// 两个值的时候代表着此时的背景图宽高比例相同
.Bg(@bg, @x:100%) {
  background: url('@{bg}') no-repeat center center;
  background-size: @x @x;
}
// 如果传进来三个值，第一个值是背景图，第二个是宽度的百分比，第三个是高度的百分比
.Bg(@bg, @x, @y) {
  background: url('@{bg}') no-repeat center center;
  background-size: @x @y;
}

// 可以传入三个值或者四个值
//当传入4个值的时候默认font-family为regular，
//第一个值代表font-size，第二个值代表font-weight，第三个值代表color ,第四个值传入代表font-family
.font-class(@s, @w, @c, @f:@fr) {
  font-size: @s;
  font-weight: @w;
  color: @c;
  font-family: @f;
}

.ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 字体大小
@size10: 10px;
@size11: 11px;
@size12: 12px;
@size13: 13px;
@size14: 14px;
@size15: 15px;
@size17: 17px;
@size20: 20px;
@size21: 21px;
@size22: 22px;
@size26: 26px;
@size36: 36px;

// 字体族
@fm:
  PingFangSC-Medium,
  PingFang SC;
@fr:
  PingFangSC,
  PingFang SC;
// 自定义字体,数字专用
